<template>
    <view class="bg-white padding-lr-sm wrap">
        <scroll-view scroll-x :scroll-into-view="scrollEl" scroll-with-animation class="scroll padding-tb-base">
            <view
                v-for="(item, index) in settingStore.allCategoryList"
                :key="item.catid"
                :id="`scrollitem${index}`"
                @click="handlerScroll(index, false)"
                class="item"
            >
                <image class="size-img-ss round" :src="item.thumb" mode="scaleToFill" />
                <view class="text-sm text-center text" :class="selectIndex == index ? 'text-main' : ''">{{ item.catname }}</view>
            </view>
        </scroll-view>
        <view class="down" @click="isShow = !isShow">
            <view class="text-center text-sm">展开</view>
            <view class="cuIcon-down text-base"></view>
        </view>

        <view class="mask" :class="{ show: isShow }" @click="isShow = false">
            <view class="popup-top" @click.stop>
                <view class="margin-base">
                    <view class="text-bold">全部分类</view>
                    <scroll-view scroll-y style="height: calc(40vh - 120rpx)" class="margin-tb-base">
                        <view class="list">
                            <view v-for="(item, index) in settingStore.allCategoryList" :key="item.catid" @click="handlerScroll(index, true)">
                                <image :src="item.thumb" class="size-img-xs round" mode="scaleToFill" />
                                <view class="text-center text-sm" :class="selectIndex == index ? 'text-main' : ''">{{ item.catname }}</view>
                            </view>
                        </view>
                    </scroll-view>
                    <view @click="isShow = false" class="flex align-center justify-center padding-base text-grey">
                        <view>收起</view>
                        <view class="icon-xiangshang text-lg margin-left-xs"></view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useSettingStore } from "@/store/module/setting";
import { useSystemStore } from "@/store/module/system";

const emits = defineEmits(["update:modelValue", "update:categoryList2", "change"]);

const systemStore = useSystemStore();
const settingStore = useSettingStore();
const selectIndex = ref<number>(0); // 当前选择的索引
const scrollEl = ref<string>(""); // 滚动到指定到元素
const isShow = ref<boolean>(false); // 是否展示弹窗
const navHeight: string = `${systemStore.navHeight}px`;

// 创建时传递一次数据
emits("update:modelValue", selectIndex.value);
emits("update:categoryList2", settingStore.allCategoryList[selectIndex.value].child);
emits("change");

const handlerScroll = (index: number, isClose: boolean) => {
    selectIndex.value = index;
    if (selectIndex.value > 2) {
        scrollEl.value = `scrollitem${selectIndex.value - 2}`;
    }
    if (selectIndex.value <= 2) {
        scrollEl.value = `scrollitem${selectIndex.value - 1}`;
    }
    if (isClose) {
        isShow.value = false;
    }
    let list: any[] = settingStore.allCategoryList[selectIndex.value].child;
    if (list.length > 0) {
        emits("update:categoryList2", list);
    } else {
        emits("update:categoryList2", []);
    }
    emits("update:modelValue", selectIndex.value);
    emits("change");
};
</script>

<style scoped lang="scss">
.wrap {
    position: relative;
    display: flex;
    height: 180rpx;
    .scroll {
        width: calc(100% - 60rpx);
        white-space: nowrap;
        display: flex;
        gap: 30rpx;
        .item {
            width: 130rpx;
            display: inline-block;
            flex-direction: column;
            text-align: center;
            transition: 0.5s;
        }
    }

    .down {
        width: 0rpx;
        padding: 30rpx;
        background-color: #fff;
        height: 100%;
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.1);
    }

    .mask {
        position: fixed;
        top: v-bind(navHeight);
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba($color: #000000, $alpha: 0.4);
        visibility: hidden;
        z-index: 9;
        .popup-top {
            position: absolute;
            left: 0;
            top: -60vh;
            width: 100%;
            z-index: 999;
            background-color: #fff;
            transition: 0.4s;
            border-radius: 0 0 30rpx 30rpx;

            .list {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                gap: 30rpx;
                text-align: center;
            }
        }

        &.show {
            visibility: visible;
            z-index: 999;
            .popup-top {
                top: 0rpx;
            }
        }
    }
}
</style>
